import React, { Component } from 'react';
import styles from './index.less';
import normal from '@/assets/normal.svg';
import TabsV1 from '@/components/common/tabs/index.jsx';
import Up from '@/assets/Up.svg';
import Down from '@/assets/Down.svg';
import RcBarCharts from '@/components/common/barCharts/index.jsx';
class PowerCompared extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
      xData: [],
      yData: [],
      legendName: [],
      legendShow: false,
      all_data: {},
      title: [],
      isUp: true,
      data: [],
    };
  }
  componentDidMount() {
    this.handleFull();
  }
  handleFull() {
    document.getElementById('more').addEventListener('mousedown', function () {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    });
    document.getElementById('more1').addEventListener('mousedown', function () {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    });
    document.getElementById('more2').addEventListener('mousedown', function () {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    });
  }
  componentWillReceiveProps(nextProps) {
    let _index = 0;
    if (nextProps.data.length > 0) {
      this.setState(
        {
          data: nextProps.data,
        },
        () => {
          this.handleTabs(this.state.value);
        },
      );
    }
  }
  getData(value) {
    let _x = [],
      _y1 = [],
      _y2 = [],
      _lengend = [];
    if (value == 0) {
      this.state.data &&
        this.state.data[0].content.forEach((item, index) => {
          _x.push(item.x), _y1.push(item.current);
          _y2.push(item.prev);
        });
      _lengend.push(
        this.state.data[0].title.current,
        this.state.data[0].title.prev,
      );
      this.setState({
        all_data: this.state.data[0],
        isUp: this.state.data[0].comparision.indexOf('-') != -1 ? false : true,
        xData: _x,
        yData: [_y1, _y2],
        legendName: _lengend,
      });
    } else if (value == 1) {
      this.state.data &&
        this.state.data[1].content.forEach((item, index) => {
          _x.push(item.x), _y1.push(item.current);
          _y2.push(item.prev);
        });
      _lengend.push(
        this.state.data[1].title.current,
        this.state.data[1].title.prev,
      );
      this.setState({
        all_data: this.state.data[1],
        isUp: this.state.data[1].comparision.indexOf('-') != -1 ? false : true,
        xData: _x,
        yData: [_y1, _y2],
        legendName: _lengend,
      });
    } else {
      this.state.data &&
        this.state.data[2].content.forEach((item, index) => {
          _x.push(item.x), _y1.push(item.current);
          _y2.push(item.prev);
        });
      _lengend.push(
        this.state.data[2].title.current,
        this.state.data[2].title.prev,
      );
      this.setState({
        all_data: this.state.data[2],
        isUp: this.state.data[2].comparision.indexOf('-') != -1 ? false : true,
        xData: _x,
        yData: [_y1, _y2],
        legendName: _lengend,
      });
    }
  }
  handleTabs(value) {
    this.setState(
      {
        value,
      },
      () => {
        this.getData(this.state.value);
      },
    );
  }
  render() {
    const { value, xData, yData, legendName, legendShow, all_data, isUp } =
      this.state;
    return (
      <div className={styles.powerCompared}>
        <div className={styles.title} id="more">
          <img src={normal} alt="" />
          用电对比
        </div>
        <div className={styles.legend}>
          <div className={styles.tabs}>
            <TabsV1
              list={['日', '月', '年']}
              active={value}
              height={20}
              ref="tabsV1"
              changeTabHandle={this.handleTabs.bind(this)}
            />
          </div>
          <div className={styles.RTitle} id="more1">
            <div>
              <span className={styles.today}></span>
              {all_data.title && all_data.title.current}
            </div>
            <div>
              <span className={styles.yest}></span>
              {all_data.title && all_data.title.prev}
            </div>
          </div>
        </div>
        <div id="more2">
          <div className={styles.echarts}>
            <RcBarCharts
              id={'vffvfffvf'}
              xData={xData}
              yData={yData}
              legendName={legendName}
              legendShow={legendShow}
              // color={color}
              lineShow={false}
              YaxisTick={false}
              barWidth={8}
              rotate={0}
              grid={{
                left: '3%',
                bottom: '4%',
                right: '2%',
              }}
            />
          </div>
          <div className={styles.desc}>
            <div>
              {value == 0
                ? '今日总用电量'
                : value == 1
                ? '本月总用电量'
                : value == 2
                ? '今年总用电量'
                : '--'}
              <span>{all_data && all_data.current_total}</span>
            </div>
            <div>
              {value == 0
                ? '昨日总用电量'
                : value == 1
                ? '上月总用电量'
                : value == 2
                ? '去年总用电量'
                : '--'}
              <span>{all_data && all_data.prev_total}</span>
            </div>
          </div>
          <div className={styles.compare}>
            <div className={styles.bg}>
              <div className={styles.left}>
                <span>同比</span>
                <b>{all_data && all_data.comparision}</b>
                {isUp == false ? <img src={Down} /> : <img src={Up} />}
              </div>
              <div className={styles.right}>
                <span>当日最大用电时间</span>
                <b>{all_data && all_data.max_time}</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default PowerCompared;
